<template>
    <div class="person">
        <h1>watchEffect</h1>
        <h2>水温:{{ temp }}</h2>
        <h2>高度:{{ height }}</h2>
        
        <button @click="changeTemp">修该水温</button>
        <button @click="changeHeight">修改高度</button>
    </div>
</template>



<script lang="ts" setup name="Person">
    import {ref, watch,watchEffect} from 'vue'

    //数据
    let temp=ref(20)
    let height=ref(0)



    //方法
    function changeTemp(){
        temp.value+=10
    }
    function changeHeight(){
        height.value+=10
    }


    // //监视 --watch实现
    // watch([temp,height],(value)=>{
    //     let[newTemp,newHeight]=value
    //     //逻辑
    //     if(newTemp>=50||newHeight>=80){
    //         console.log('叮叮叮')
    //     }
    // })

    //watchEffect实现
    watchEffect(()=>{
            console.log('消息0')

        if(temp.value>=60||height.value>=80){
            console.log('消息')
        }
    })

</script>






<style scoped>
    .person {
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>